绘图动画实例

镂空效果(中间透明,四周不透明)

常用于二维码扫描区域透明效果定制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#define SCREEN_WIDTH    ([UIScreen mainScreen].bounds.size.width)

//TODO: 矩形镂空
-(void)addRectHoleView
{
// 1
UIBezierPath *overlayPath = [UIBezierPath bezierPathWithRect:self.view.bounds];

// 2
UIBezierPath *transparentPath = [UIBezierPath bezierPathWithRect:CGRectMake((SCREEN_WIDTH-200)*0.5, 120, 200, 200)];
[overlayPath appendPath:transparentPath];
[overlayPath setUsesEvenOddFillRule:YES];

// 3
CAShapeLayer *fillLayer = [CAShapeLayer layer];
fillLayer.path = overlayPath.CGPath;
fillLayer.fillRule = kCAFillRuleEvenOdd;
fillLayer.fillColor = [[UIColor blackColor] colorWithAlphaComponent:0.5].CGColor;

// 4
[self.view.layer addSublayer:fillLayer];
}

写法2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
//TODO: 圆形镂空
- (void)addArcHoleView{
//中间镂空的矩形框
CGRect myRect =CGRectMake((SCREEN_WIDTH-200)*0.5, 120, 200, 200);
//背景
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:[UIScreen mainScreen].bounds cornerRadius:0];

//镂空
UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:myRect];
[path appendPath:circlePath];
[path setUsesEvenOddFillRule:NO];


CAShapeLayer *fillLayer = [CAShapeLayer layer];
fillLayer.fillColor = [UIColor blackColor].CGColor;
fillLayer.opacity = 0.5;
fillLayer.path = path.CGPath;

fillLayer.fillRule = kCAFillRuleEvenOdd;//设置填充规则(重点)
[self.view.layer addSublayer:fillLayer];
}

//写法2
- (void)addArcHoleView2{
UIView *maskView0 = [[UIView alloc] initWithFrame:CGRectMake(0,0,SCREEN_WIDTH,SCREEN_HEIGHT)];
maskView0.layer.opacity=0.5;
maskView0.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.5];
[self.view addSubview:maskView0];
maskView0.layer.mask = ({
CGRect roundedRect = self.view.bounds;
roundedRect.origin.x = roundedRect.size.width / 4.0f;
roundedRect.origin.y = roundedRect.size.height / 4.0f;
roundedRect.size.width /= 2.0f;
roundedRect.size.height= roundedRect.size.width;

CGFloat cornerRadius = roundedRect.size.height / 2.0f;//高度=宽度

UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.view.bounds];
UIBezierPath *croppedPath = [UIBezierPath bezierPathWithRoundedRect:roundedRect cornerRadius:cornerRadius];
[path appendPath:croppedPath];
[path setUsesEvenOddFillRule:YES];

CAShapeLayer *mask = [CAShapeLayer layer];
mask.path = path.CGPath;
mask.fillRule = kCAFillRuleEvenOdd;
mask;
});
}

微信聊天泡泡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
-(void)drawChatBubble
{
/*右边聊天泡泡*/
UIImage *rightBubbleImage = [UIImage imageNamed:@"Information-box_blue_nor"];
rightBubbleImage = [rightBubbleImage stretchableImageWithLeftCapWidth:rightBubbleImage.size.height * 0.3 topCapHeight:rightBubbleImage.size.height * 0.8];
UIImageView *bubbleView=[[UIImageView alloc]init];
bubbleView.image=rightBubbleImage;
bubbleView.frame=CGRectMake(200, 200.0f,rightBubbleImage.size.width*3, rightBubbleImage.size.height*3);
[self.view addSubview:bubbleView];

//聊天图片
UIImageView *ChatPicture=[[UIImageView alloc]initWithFrame:bubbleView.frame];
ChatPicture.image=[UIImage imageNamed:@"chatDefaultImage.jpg"];
[self.view addSubview:ChatPicture];

//画图 仿weixin
CALayer *layer = bubbleView.layer;
layer.frame = (CGRect){{0,0},bubbleView.layer.frame.size};
ChatPicture.layer.mask = layer;
}

How To Implement A Circular Image Loader Animation with CAShapeLayer

文章作者: kyren
文章链接: http://huluo666.github.io/2016/04/11/绘图实例 镂空效果/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Kyren's Blog